import React, {useState} from 'react';
import './help.scss'
const Help = () => {
  const [index, SetIndex] = useState(0);
  let lists = [
    {id:0,txt:"我拍下来后的商品什么时候发货？"},
    {id:0,txt:"已成团未发货如何退款？"},
    {id:0,txt:"没有收到货/商家发错地址了怎么办？"},
    {id:0,txt:"收到商品有问题怎么办？"},
    {id:0,txt:"如何联系商家客服？"},
    {id:0,txt:"为什么我的优惠券不能使用？"},
    {id:0,txt:"“全网总售”和“已拼”有什么区别？"},
    {id:0,txt:"收到的商品能退换货么？"},
  ]
  return (
    <div className="container_skx">
      <div className="banner_img_skx">
        <img src="//cdn.pinduoduo.com/upload/home/img/help/pdd_help_banner_v2.jpg" alt=""/>
      </div>
      
      <div className="question_skx">
        <div className="leftSide_skx">
          <div className="changjian_skx">常见问题</div>
          <div className="news_skx">
            <div className={index === 0 ? 'action' : ''} onClick={()=>SetIndex(0)}>
            新手指南</div>
            <ul>&gt;购物流程</ul>
          </div>
          <div className="busess_skx">
            <div className={index === 1 ? 'action' : ''} onClick={()=>SetIndex(1)}>交易问题</div>
            <ul>{  
              lists.map((item,index)=>{
                return <><li key={index}>&gt;{item.txt}</li></>
              })
              }</ul>
          </div>
          <div className="tuikuan_skx">
            <div className={index === 2 ? 'action' : ''} onClick={()=>SetIndex(2)}>退款&售后</div>
            <ul>
              <li>&gt;退换货流程</li>
              <li>&gt;退换货流程</li>
              <li>&gt;7天无理由退换货</li>
            </ul>
          </div>
          <div className="userAbout_skx">
            <div className={index === 3 ? 'action' : ''} onClick={()=>SetIndex(3)}>账户相关</div>
            <ul>
              <li>&gt;账户安全与账户信息</li>
            </ul>
          </div>
          <div className="lianxi_skx">
            <div className={index === 4 ? 'action' : ''} onClick={()=>SetIndex(4)}>联系我们</div>
            <ul>
              <li>&gt;如何联系拼多多客服？</li>
            </ul>
          </div>
        </div>
        <div className="rightSide_skx">
          <div className="rightTit_skx">
            <div style={{ display: index === 0 ? 'block' : 'none' }}>新手指南&gt;</div>
            <div style={{ display: index === 1 ?  'block' : 'none'  }}>交易问题&gt;</div>
            <div style={{ display: index === 2 ?  'block' : 'none'  }}>退款&售后&gt;</div>
            <div style={{ display: index === 3 ?  'block' : 'none'  }}>账户相关&gt;</div>
            <div style={{ display: index === 4 ?  'block' : 'none'  }}>联系我们&gt;</div>
            <span>购物流程</span>
          </div>
          <div className="rightContext_skx">
            <img src="//cdn.pinduoduo.com/upload/home/img/help/NewerGuide.png" alt=""/>
          </div>
        </div>
      </div>
    </div>
  )
};

export default Help;